<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>
    
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="js/md5.js"></script>
    <script type="application/javascript" src="js/jquery.cookie.min.js"></script>
    <script type="application/javascript" src="js/menu.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>

<style type="text/css">        
    #changeBool{
        display:none;
    }
@media screen and (orientation:portrait) and (max-height: 1000px){
    #wrapper{
        position:fixed;
        width: 100%;
        height: 100%;
        margin-left: 30%;
        margin-top: 50%;
    }
    #background{
        position:fixed;
        margin-left: -30%;
        margin-top: -60%;
		width: 100%;
		height: 100%;
    }
    #img{
        content: url('img/account/changeOverview_prt.png');
        position: fixed;
        min-height: 100%;
        max-height: 20000px;
        max-width: 100%;
    }
    
    #prevPassDiv{
        position: fixed;
        margin-top:-10%;
        margin-left:-20%;
    }
    #newPassDiv{
        position: fixed;
        margin-top:5%;
        margin-left:-20%;
    }
    #newPassVerifyDiv{
        position: fixed;
        margin-top:20%;
        margin-left:-20%;
    }
    /*input fields*/
    #prevPass, #newPass, #newPassVerify{
        position: fixed;
        color: white;
        background-color: transparent;
        font-size: 30px;
        width: 80%;
        max-height: 100%;
        margin-left: 1%;
        margin-top: 0%;
        outline: 0;
    }
    
    #buttons{
        position: fixed;
        margin-top: 45%;
        margin-left: -20%;
    }
    .button{
        float:left;
        width:90%;
        margin-bottom: 10px;
    }
	
    .input{
        position: fixed;
        content: url(img/input.png);
        width:81%;
        margin-left: .5%;
        margin-top: -.5%;
        min-height: 40px;
    }
}    
@media screen and (orientation:landscape) and (max-width: 1000px){
    #wrapper{
        position:fixed;
        width: 100%;
        height: 100%;
        margin-left: 30%;
        margin-top: 50%;
    }
    #background{
        position:fixed;
        margin-left: -28%;
        margin-top: -48%;
    }
    #img{
        content: url('img/account/changeOverview.png');
        position: fixed;
        min-height: 100%;
        max-height: 20000px;
        max-width: 100%;
        margin-left: -2%;
    }
    
    #prevPassDiv{
        position: fixed;
        margin-top:-35%;
        margin-left:-10%;
    }
    #newPassDiv{
        position: fixed;
        margin-top:-25%;
        margin-left:-10%;
        padding-top: 0px;
    }
    #newPassVerifyDiv{
        position: fixed;
        margin-top:-15%;
        margin-left:-10%;
    }
    
    /*input fields*/
    #prevPass, #newPass, #newPassVerify{
        position: fixed;
        color:white;
        background-color: transparent;
        font-size: 40px;
        max-height: 100%;
        margin-left: 1%;
        margin-top: 0%;
        outline: 0;
        width: 67%;
    }
        
    #buttons{
        position: fixed;
        margin-top: -5%;
        margin-left: -7%;
    }
    .button{
        float:left;
        width:80%;
    }
    
    .input{
        position: fixed;
        content: url(img/input.png);
        width:68%;
        margin-left: .5%;
        margin-top: -.5%;
        min-height: 40px;
    }
}

/* 
    Tablet section 
*/
    
@media screen and (orientation:portrait) and (min-height: 1000px){
    #wrapper{
        position:fixed;
        width: 100%;
        height: 100%;
        margin-left: 0%;
        margin-top: 0%;
    }
    #background{
        position:fixed;
        margin-left: 0%;
        margin-top: 0%;
		width: 100%;
		height: 100%;
    }
    #img{
        content: url('img/account/changeOverview_prt.png');
        position: fixed;
        min-height: 100%;
        max-height: 20000px;
        max-width: 100%;
    }
    
    #prevPassDiv{
        position: fixed;
        margin-top:30%;
    }
    #newPassDiv{
        position: fixed;
        margin-top:40%;
    }
    #newPassVerifyDiv{
        position: fixed;
        margin-top:50%;
    }
    /*input fields*/
    #prevPass, #newPass, #newPassVerify{
        position: absolute;
        color: white;
        background-color: transparent;
        font-size: 50px;
        width: 600px;
        min-height: 80px;
        left: 120px;
        outline: 0;
    }
    
    #buttons{
        position: fixed;
        margin-top: 65%;
        left: 115px;
    }
    .button{
        width: 600px;
    }
	
    .input{
        position: absolute;
        content: url(img/input.png);
        width: 615px;
        left: 115px;
        min-height: 90px;
    }
}
    
@media screen and (orientation:landscape) and (min-width: 1000px){    
    #wrapper{
        position:fixed;
        width: 100%;
        height: 100%;
        margin-left: 0%;
        margin-top: 0%;
    }
    #background{
        position:fixed;
        margin-left: 0%;
        margin-top: 0%;
		width: 100%;
		height: 100%;
    }
    #img{
        position: absolute;
        content: url('img/account/changeOverview.png');
        height: 1000px;
        width: 1500px;
    }
    
    #prevPassDiv{
        position: fixed;
        margin-top:25%;
        margin-left:10%;
    }
    #newPassDiv{
        position: fixed;
        margin-top:40%;
        margin-left:10%;
    }
    #newPassVerifyDiv{
        position: fixed;
        margin-top:55%;
        margin-left:10%;
    }
    
    /*input fields*/
    #prevPass, #newPass, #newPassVerify{
        position: absolute;
        color:white;
        background-color: transparent;
        font-size: 60px;
        width: 700px;
        min-height: 80px;
        left: 160px;
        outline: 0;
    }
        
    #buttons{
        position: fixed;
        margin-top: 70%;
        margin-left:290px;
    }
    .button{
        width: 700px;
    }
    
    .input{
        position: absolute;
        content: url(img/input.png);
        width:715px;
        left:155px;
        height: 90px;
    }
}

</style>
    
</head>    
    
<body> 
    <label id='changeBool' class='hidden'></label>
    <div id='wrapper'>
        <div id='background'>
            <img alt='register' id='img' />
        </div>
        <div id='prevPassDiv'>
            <img alt='input' class='input' />
            <input type='password' placeholder="Old password" id='prevPass' tabindex=1  name='prevpass' />
        </div>
        <div id='newPassDiv'>
            <img alt='input' class='input' />
            <input type='password' placeholder="New password" id='newPass' tabindex=2  name='newPass' />
        </div>
        <div id='newPassVerifyDiv'>
            <img alt='input' class='input' />
            <input type='password' placeholder="Verify new password" id='newPassVerify' tabindex=3  name='newPassVerify' />
        </div>
        <div id='buttons'>
            <img alt='changePass' class='button' id='changePass' src="img/account/changeBtn.png"/>
        </div>
    </div>
    
    <script>
		document.addEventListener("keypress", onkeypress, false);
		$('#changePass').on("click", initChangePass);
        
        function onkeypress(e){
            if(e.which == 13 && document.activeElement.id == 'prevPass')
            {
                $('#newPass').focus();
            }
            else if(e.which == 13 && document.activeElement.id == 'newPass')       //Return key
            {
                $('#newPassVerify').focus();
            }
            else if(e.which == 13 && document.activeElement.id == 'newPassVerify')       //Return key
            {
                initChangePass();
            }
        }
        
        function changePassword(userId, newpass)
        {
            var urlAjax = getUrlServlet() + "utf?method=changePassword&userId=" + userId + "&newpass=" + newpass,
                header = "application/x-www-form-urlencoded;charset=utf-8",
                type = "POST";
        
            $.ajax({
            url : urlAjax,
                type : type,
                dataType : 'JSON',
                contentType : header,
                encoding : "utf-8",
                error : function(data, status, jqx) {

                    alert(status);

                },
                success : function(data, status, jqx) {   
                    
                    alert('Changed password!');
                    window.location.href = 'account.html';

                }
            });
        }
        
        function passcheck(userId, oldpass)
        {
            var urlAjax = getUrlServlet() + "utf?method=passwordCheck&userId=" + userId + "&oldpass=" + oldpass,
                header = "application/x-www-form-urlencoded;charset=utf-8",
                type = "GET";
        
            $.ajax({
            url : urlAjax,
                type : type,
                dataType : 'JSON',
                contentType : header,
                encoding : "utf-8",
                error : function(data, status, jqx) {
                    
                    alert(status);

                },
                success : function(data, status, jqx) {   
                    
                    if(data == true){
                        $('#changeBool').html('true');
                    }
                    else{
                        $('#changeBool').html('false');
                    }

                }
            });
        }
        
        function initChangePass(){
            var oldPassLngth = document.getElementById('prevPass').value.length,
                newPassLngth = document.getElementById('newPass').value.length,
                newPassVerifyLngth = document.getElementById('newPassVerify').value.length,
                userId = getUserId();
            
            if(oldPassLngth > 0 && newPassLngth > 0 && newPassVerifyLngth > 0)
            {
                var oldPass = md5($('#prevPass').val()),
                    newPass = md5($('#newPass').val()),
                    newPassVerify = md5($('#newPassVerify').val());
                
                if(oldPass != newPass && newPass == newPassVerify)
                {
                    passcheck(userId, oldPass);
                    setTimeout(function(){
                        if($('#changeBool').html() == 'true'){
                           changePassword(getUserId(), newPass);
                        }
                        else{
                            alert('That is not your current password!');
                        }
                    },100);
                }
                else if(oldPass == newPass || oldPass == newPassVerify)
                {
                    alert("New password can't be the same as your old password");
                }
                else if(newPassVerify != newPass)
                {
                    alert("Passwords do not match");
                }
            }
            else
            {
                alert('Every field needs to be filled in');
            }
        }
        
    </script>
</body>
</html>
